<template>
	<view class="sort">
		<view class="head">
			<view class="head_tit">分销排行榜</view>
			<view class="money">已赚佣金:{{money}}</view>
			<view class="rank">当前排名:{{user_rank}}</view>
		</view>
		<view class="t_tou">
			<view class="tou_1">排名</view>
			<view class="tou_2">昵称</view>
			<view class="tou_1">分销</view>
		</view>
		<view class="t">
			<block v-for="(item,index) of list" :key="index">
				<li class="t_01">
					<view class="t_01_1" v-if="index>2">{{item.rank}}</view>
					<view class="t_01_1" v-if="index<3"> <img src="@/imgs/win.png"></img></view>
					<view class="t_01_2">
						<!-- <img src="@/imgs/8.jpg"></img> -->{{item.username}} </view>
					<view class="t_01_1">{{item.money.toFixed(2)}}</view>
				</li>
			</block>
		</view>
	</view>
</template>

<script>
	import {
		mapActions,
		mapGetters
	} from 'vuex';
	export default {
		data() {
			return {
				list: [],
				user_rank: '暂无排位',
				money: 0
			};
		},
		onLoad() {
			uni.showLoading({
				mask: true
			});
			//获取排行
			this.rank().then(res => {
				uni.hideLoading();
				if (res.code == 0) {
					this.list = res.data;
					let userId = this.userId();
					console.log('userId', userId)
					if (this.list && this.list.length != 0) {
						let user = this.list.find(item => {
							return item.userId == userId;
						})
						if (user) {
							this.user_rank = user.rank;
							this.money = user.money;
						}
					}
				} else {
					uni.showToast({
						title: res.msg,
						icon: 'none',
						duration: 1500
					})
				}
			}).catch(err => {
				uni.hideLoading();
				uni.showToast({
					title: err.msg,
					icon: 'none',
					duration: 1500
				})
				console.log('err', err);
			});
		},
		onShareAppMessage(res) {
			let referrer = uni.getStorageSync('referrer');
			console.log('referrer', referrer);
			if (referrer) {
				return {
					title: '恒鲜惠美食在线',
					path: '/pages/menu/menu?referrer=' + referrer,
					imageUrl: require('static/images/menu/banner.jpeg')
				}
			}
		},
		methods: {
			...mapGetters(['userId']),
			...mapActions(['rank', 'rewardList']),
		}
	}
</script>

<style lang="less">
	.sort {
		.head {
			background-color: #E0451D;
			color: #fff;
			padding: 40px 10px 30px;
			line-height: 20px;

			.head_tit {
				font-size: 24px;
				padding-bottom: 20px;
			}

			.money,
			.rank {
				font-size: 14px;
				margin-bottom: 5px;
			}
		}

		.head span {
			font-size: 30px;
			padding: 0 5px;
		}

		.t_tou {
			display: flex;
			padding: 10px;
			height: 30px;
			line-height: 30px;
			margin-bottom: 10px;
			justify-content: space-between;
		}

		.tou_1 {
			width: 20%;
			text-align: center;
		}

		.tou_2 {
			width: 45%;
			text-align: center;
		}

		.t_01 {
			display: flex;
			height: 50px;
			padding: 0 10px;
			line-height: 50px;
			justify-content: space-between;
			align-items: center;
		}

		.t_01_1 {
			width: 20%;
			text-align: center;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.t_01_1 img {
			width: 20px;
			height: 20px;
		}

		.t_01_2 {
			width: 45%;
			display: flex;
			justify-content: center;
			align-items: center
		}

		.t_01_2 img {
			width: 20px;
			height: 20px;
			border-radius: 30px;
			margin-right: 10px;
		}

		.t li:nth-of-type(odd) {
			background-color: #EEEEEE;
		}

		.t li:nth-of-type(even) {
			background-color: #fff;
		}

	}
</style>
